<template>
  <div>
    <van-nav-bar
        title="我的订单"
        left-text="返回"
        right-text="按钮"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
    />
    <van-tabs v-model="active" id="tab">
      <van-tab title="足迹">
        <van-sku
            v-model="show"
            :sku="sku"
            :goods="goods"
            :goods-id="goodsId"
            :quota="quota"
            :quota-used="quotaUsed"
            :hide-stock="sku.hide_stock"
            :message-config="messageConfig"
            @buy-clicked="onBuyClicked"
            @add-cart="onAddCartClicked"
        />
        <van-swipe-cell>
          <van-card
              :num=num
              :price=price
              :desc=desc
              :title=title
              :thumb=thumb
              class="goods-card"
          >
            <template #tags>
              <van-tag plain type="danger">标签</van-tag>
              <van-tag plain type="danger">标签</van-tag>
            </template>
            <template #footer>
              <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" size="mini">申请退货</van-button>
              <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" size="mini" @click="show=true">再次购买</van-button>
            </template>
          </van-card>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button"/>
          </template>
        </van-swipe-cell>
      </van-tab>
      <van-tab title="待付款">
          <van-card
              :num=num
              :price=price
              :desc=desc
              :title=title
              :thumb=thumb
              class="goods-card"
          >
            <template #tags>
              <van-tag plain type="danger">标签</van-tag>
              <van-tag plain type="danger">标签</van-tag>
            </template>
            <template #footer>
              <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" size="mini">立即付款</van-button>
            </template>
          </van-card>
      </van-tab>
      <van-tab title="待发货">
        <van-card
            :num=num
            :price=price
            :desc=desc
            :title=title
            :thumb=thumb
            class="goods-card"
        >
          <template #tags>
            <van-tag plain type="danger">标签</van-tag>
            <van-tag plain type="danger">标签</van-tag>
          </template>
          <template #footer>
            <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" size="mini">催促发货</van-button>
            <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" size="mini">取消订单</van-button>
          </template>
        </van-card>
      </van-tab>
      <van-tab title="运输中">
        <van-card
            :num=num
            :price=price
            :desc=desc
            :title=title
            :thumb=thumb
            class="goods-card"
        >
          <template #tags>
            <van-tag plain type="danger">标签</van-tag>
            <van-tag plain type="danger">标签</van-tag>
          </template>
          <template #footer>
            <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" size="mini">查看物流</van-button>
          </template>
        </van-card>
      </van-tab>
      <van-tab title="待收货">
        <van-card
            :num=num
            :price=price
            :desc=desc
            :title=title
            :thumb=thumb
            class="goods-card"
        >
          <template #tags>
            <van-tag plain type="danger">标签</van-tag>
            <van-tag plain type="danger">标签</van-tag>
          </template>
          <template #footer>
            <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" size="mini" @click="onDialog">确认收货</van-button>
          </template>
        </van-card>
      </van-tab>
      <van-tab title="评价">
        <van-card
            :num=num
            :price=price
            :desc=desc
            :title=title
            :thumb=thumb
            class="goods-card"
        >
          <template #tags>
            <van-tag plain type="danger">标签</van-tag>
            <van-tag plain type="danger">标签</van-tag>
          </template>
          <template #footer>
            <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" size="mini" @click="showShare = true">
              商品分享
            </van-button>
            <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" size="mini">商品评价</van-button>
            <van-share-sheet
                v-model="showShare"
                title="立即分享给好友"
                :options="options"
            />
          </template>
        </van-card>
      </van-tab>
    </van-tabs>
  </div>

</template>

<script>

import {Toast} from 'vant';
import { Dialog } from 'vant';

export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
      show: false,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: '颜色', // skuKeyName：规格类目名称
            k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: '1', // skuValueId：规格值 id
                name: '红色', // skuValueName：规格值名称
                imgUrl: 'https://img01.yzcdn.cn/1.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: 'https://img01.yzcdn.cn/1p.jpg', // 用于预览显示的规格类目图片
              },
              {
                id: '1',
                name: '蓝色',
                imgUrl: 'https://img01.yzcdn.cn/2.jpg',
                previewImgUrl: 'https://img01.yzcdn.cn/2p.jpg',
              }
            ],
            largeImageMode: true, //  是否展示大图模式
          }
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId
            s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
            s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110 // 当前 sku 组合对应的库存
          }
        ],
        price: '1.00', // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        messages: [
          {
            // 商品留言
            datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
            multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
            name: '留言', // 留言名称
            type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
            required: '1', // 是否必填 '1' 表示必填
            placeholder: '', // 可选值，占位文本
            extraDesc: ''  // 可选值，附加描述文案
          }
        ],
        hide_stock: false // 是否隐藏剩余库存
      },
      goods: {
        // 默认商品 sku 缩略图
        picture: 'https://img01.yzcdn.cn/1.jpg'
      },
      customStepperConfig: {
        // 自定义限购文案
        quotaText: '每次限购xxx件',
        // 自定义步进器超过限制时的回调
        handleOverLimit: (data) => {
          const { action, limitType, quota, quotaUsed, startSaleNum } = data;

          if (action === 'minus') {
            Toast(startSaleNum > 1  ? `${startSaleNum}件起售` : '至少选择一件商品');
          } else if (action === 'plus') {
            // const { LIMIT_TYPE } = Sku.skuConstants;
            if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
              let msg = `单次限购${quota}件`;
              if (quotaUsed > 0) msg += `，你已购买${quotaUsed}`;
              Toast(msg);
            } else {
              Toast('库存不够了');
            }
          }
        },
        // 步进器变化的回调
        handleStepperChange: currentValue => {},
        // 库存
        stockNum: 1999,
        // 格式化库存
        stockFormatter: stockNum => {},
      },
      num: "2",
      price: "2.00",
      desc: "描述信息",
      title: "商品标题",
      thumb: "https://img01.yzcdn.cn/vant/ipad.jpeg",
      active: 2,
    };
  },
  name: "orders",
  methods: {
    onDialog(){
      Dialog.confirm({
        title: '是否确认收货',
        message: '是否确认已经收到商品,并且商品无损坏,确认无误后请点击确认',
      })
          .then(() => {
            // on confirm
          })
          .catch(() => {
            // on cancel
          });
    },
    onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    },
  },
}

</script>

<style>
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
</style>